<template>
    <div>
        <i-table border stripe  @on-selection-change="onSelect"  :columns="format" :data="show_list" height="730">            
            <template slot-scope="{ row, index }" slot="action">
                <Dropdown>
                    <a href="javascript:void(0)">
                        <Icon type="ios-create-outline" size="40" />
                    </a>
                    <DropdownMenu slot="list" placement="bottom-end">
                        <DropdownMenu><a class="button-link"  @click="btn_test_release(index)" v-if="show_list[index].has_pipeline==1">发布测试</a></DropdownMenu>
                        <DropdownMenu><a class="button-link"  @click="btn_prod_release(index)" v-if="show_list[index].has_pipeline==1">发布生产</a></DropdownMenu>
                    </DropdownMenu>
                </Dropdown>
            </template>
        </i-table >
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" show-total/>
        </div>
    </div>
</template>

<script>

import { post } from  '@/api/http'
import { 
    get_all_service_list,
    build_service,
} from  '@/api'
import { show_simple_page } from '@/common/util' 

export default {
    data() {
        return {
            format: [
                {
                    type: 'selection',
                    align: 'center',
                    width:60,
                },
                {
                    title: '名字',key: 'name',
                    render: (h,params) => {
                        let has_pipeline = params.row.has_pipeline
                        if(has_pipeline==1){
                            return h('a',{
                                    style: {
                                        color: 'blue'
                                    },
                                    on: {
                                        click: ()=>{                       
                                            this.handleLink(params);
                                        }
                                    }
                                },params.row.name)
                        }else{
                            return h('span',params.row.name)
                        }

                        
                    }
                },
                {
                    title: '所属项目',key: 'project',
                },
                {
                    title: '端口',key: 'port'
                },
                {
                    title: 'Git仓库',key: 'git_url'
                },
                {
                    title: '是否有流水线',key: 'has_pipeline',
                    render: (h,params) => {
                        let has_pipeline = params.row.has_pipeline
                        if(has_pipeline) {
                            return h('p','是')
                        }else {
                            return h('p','否')
                        }
                    }
                    
                },
                {
                    title: '域名',key: 'domain',
                },
                {
                    title: '副本数',key: 'replicas'
                },
                // {
                //     title: '创建用户',key: 'create_user'
                // },
                {
                    title: '创建时间',key: 'create_time',
                },
                // {
                //     title: '更新时间',key: 'update_time'
                // },
                {
                    title: '操作',slot: 'action',width: 200,align: 'center'
                }
            ],
            show_list: [],
            // 分页
            total: 0,
            pageSize: 15,

            selecteds: [],
        }
    },
    methods: {
        // 链接点击事件，进入详情页
        handleLink(params){
            let id = params.row.id
            const { href } = this.$router.resolve({
                name: 'serviceDetail'
            });
            window.open(href+"?id="+id, '_blank');
        },
        btn_test_release(index){
            let service = this.show_list[index]    
            let data = {
                "project":service.project,
                "service":service.name,
                "env":"test",
                "replicas":service.replicas,
            }
            post(build_service,data).then(response=>{
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('发布任务已执行')
                }else {
                    alert("发布任务失败:"+info)
                }
            })

        },
        btn_prod_release(index){
            let service = this.show_list[index]    
            let data = {
                "project":service.project,
                "service":service.name,
                "env":"prod",
                "replicas":service.replicas,
            }
            post(build_service,data).then(response=>{
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('发布任务已执行')
                }else {
                    alert("发布任务失败:"+info)
                }
            })

        },
        // 选项改变就会触发
        onSelect(selection){
            this.selecteds = selection;
            console.log(this.selecteds)
        },
        check(){
            if(this.selecteds.length == 0 ){
                this.$Message.error("请选择一项")
                return false
            }  
            return true
        },
        changePage(index) {
            let _start = (index -1) * this.pageSize
            let _end = index * this.pageSize
            this.show_list = this.total_list.slice(_start,_end)
        },
        refresh() {
            post(get_all_service_list).then( (response) => {
                show_simple_page(this,response)
            })
        }
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
<style scoped>
    .button-link {
        font-size:18px;
        color: black;
        padding:25px;
        line-height:60px;
    }
</style>